<template>
    <el-form class="container-fluid" label-width="0px" :model="formInline">
        <el-form-item class="row" :style="{ height: '42px' }">
            <el-input class="input m-mr-4" clearable v-model.lazy="formInline.name" placeholder="输入题单名或ID搜索"></el-input>
        </el-form-item>
        <el-form-item :style="{ height: '42px' }">
            <el-button-group v-model="formInline.usertype">
                <el-button :style="{
                    width: '155px',
                    border: '0',
                    '--el-button-hover-background-color': 'var(--color-43)',

                    '--el-button-bg-color': formInline.usertype === 'public' ? 'var(--color-43)' : 'var(--color-d9)',
                    '--el-button-text-color': formInline.usertype === 'public' ? '#fff' : 'var(--color-8c8c8c)',
                }" value="public" @click="formInline.usertype = 'public'">公开题单</el-button>
                <el-button :style="{
                    width: '155px',
                    border: '0',
                    '--el-button-hover-background-color': 'var(--color-43)',
                    '--el-button-bg-color': formInline.usertype === 'team' ? 'var(--color-43)' : 'var(--color-d9)',
                    '--el-button-text-color': formInline.usertype === 'team' ? '#fff' : 'var(--color-8c8c8c)',
                }" value="team" @click="formInline.usertype = 'team'">团队题单</el-button>
                <el-button :style="{
                    width: '155px',
                    border: '0',
                    '--el-button-hover-background-color': 'var(--color-43)',
                    '--el-button-bg-color': formInline.usertype === 'user' ? 'var(--color-43)' : 'var(--color-d9)',
                    '--el-button-text-color': formInline.usertype === 'user' ? '#fff' : 'var(--color-8c8c8c)',
                }" value="user" @click="formInline.usertype = 'user'">我的题单</el-button>
            </el-button-group>
        </el-form-item>

        <div class="row">
            <div :style="{ width: '80px', height: '42px', lineHeight: '42px' }">编号</div>
            <div class="col" :style="{ height: '42px', lineHeight: '42px' }">名称</div>
            <div :style="{ width: '50px', padding: 0, height: '42px', lineHeight: '42px' }"></div>
            <div :style="{ width: '90px', padding: 0, height: '42px', lineHeight: '42px' }">添加到题单</div>
        </div>
        <hr :style="{ marginTop: '6px', marginBottom: '6px' }" />
        <div class="mydata">
            <div class="row list" v-for="v in getquestion" :key="v.ID"
                :style="{ marginTop: '6px', marginBottom: '6px' }">
                <div :style="{ width: '80px', height: '42px', lineHeight: '42px' }">{{ v.ID }}</div>
                <div class="col text-truncate" :style="{ height: '42px', lineHeight: '42px' }">{{ v.name
                    }} <span :style="{ fontSize: '12px', color: '#888' }">{{ }}</span>
                </div>
                <router-link :to="{
                    name: '题库列表',
                    params: { ID: v.ID },
                }" target="_blank" class="router-link-q">
                    预览
                </router-link>
                <div class="text-center" :style="{ width: '90px', padding: 0, height: '42px', lineHeight: '42px' }">
                    <span class="cu" :style="{
                        width: '24px',
                        height: '24px',
                        background: 'var(--color-cheng)',
                        borderRadius: '2px',
                        display: 'inline-block',
                        lineHeight: '24px',
                    }" @click="addclick(v)">
                        <el-icon color="#fff" size="18px" :style="{
                            transform: 'translateY(3px)'
                        }">
                            <Plus />
                        </el-icon>
                    </span>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col text-right">
                <el-pagination :page-size="limit" :total="getquestioncount" @current-change="currentchange"
                    layout="prev, pager, next"
                    :current-page="Math.floor(Number(formInline._offset) / limit) + 1"></el-pagination>
            </div>
        </div>
    </el-form>
</template>

<script setup lang="ts">
import { Plus } from '@element-plus/icons-vue';
import { debounce } from 'underscore';
import { computed, onMounted, reactive, ref, watch } from 'vue';
import { useStore } from 'vuex';
import { Iobj } from '../../../api';
import { Storekey } from '../../../interface';
import Studycodemodel from '../../../mysql_interface/studycodemodel';

const limit = 13

const getquestion = computed(() => {
    return store.state.questionbank?.rows || []
})


const p = defineProps<{ addclick: Function, _include?: { [key in keyof Studycodemodel.Iquestion]: any }, teamid?: number[] }>()


const formInline = reactive<Iobj<Studycodemodel.Iquestionbank>>({
    teamid: [],
    name: "",
    label: "",
    _offset: 0,
    usertype: "public"
})



watch(formInline, () => {
    debouncet1.value()
})

const store = useStore(Storekey)

const getquestioncount = computed(() => {
    return store.state.questionbank?.count || 0
})

function currentchange(r: number) {
    formInline._offset = (r - 1) * limit
}

const getteam = computed(() => {
    return store.state.team?.rows || []
})

const loading = ref(false)


const debouncet1 = ref(debouncet())
function debouncet() {
    return debounce(async () => {
        const { name, teamid, _offset } = formInline;
        const obj: Iobj<Studycodemodel.Iquestionbank> = {
            _order: "ID",
            _offset,
            _limit: limit,
        };
        let _like: [keyof Studycodemodel.Iquestionbank, any]
        if (name) {
            _like = ["name", formInline.name];
            const id = Number(name);
            if (id == name) {
                _like = ["ID", id];
            }
            obj._like = _like;
        }
        let t;
        if (formInline.usertype == "team") {
            t = teamid.length ? teamid : getteam.value?.map((v) => v.ID);
            obj.teamid = t;
            obj.usertype = formInline.usertype
            if (p.teamid?.length) {
                obj.teamid = p.teamid
            }

        } else if (formInline.usertype == "user") {
            obj.userid = [store.state.user?.ID]
            obj.usertype = [formInline.usertype, 'team']
        }
        if (p._include) {
            Object.assign(obj, {
                _include: {
                    ...(obj._include || {}),
                    ...p._include
                }
            })
        }
        loading.value = true;
        await store.dispatch("actionquestionbank", obj);
        loading.value = false;
    }, 300);
}




onMounted(() => {
    debouncet1.value()
})

</script>



<style scoped>
.container-fluid {
    padding: 0;
    height: 846px;
}


.mydata {
    height: 600px;
    overflow-y: auto;
    overflow-x: hidden;
}

.input {
    display: inline-block;
}

.col-center div {
    width: 90px;
}

.icon-class-var {
    display: none;
}

.list {
    padding-bottom: 6px;
}

.list:hover {
    color: var(--color-cheng);
    background-color: #f8f8f8;
}

.list:hover .icon-class-var {
    display: inline-block;
}

.row {
    transition: all 0.4s;
}
</style>